<template>
    <div class="app-container">
        <el-card class="main-card">
            <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="90px" size="small">
                <el-form-item label="案例名称" prop="caseName">
                    <el-input v-model="queryParams.caseName" clearable placeholder="请输入组态名称" />
                </el-form-item>
                <el-form-item>
                    <el-button v-hasPermi="['iot:case:list']" icon="el-icon-search" size="mini" type="primary" @click="listCase">{{ $t('search') }}</el-button>
                    <el-button v-hasPermi="['iot:case:assignment']" icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="main-card">
            <div class="card-toolbar mb20 flex-between">
                <div>
                    <el-button v-hasPermi="['iot:case:add']" icon="el-icon-plus" plain size="mini" style="margin-right: 20px" type="primary" @click="handleAdd">{{ $t('add') }}</el-button>
                </div>
                <el-radio-group class="fr ml10" plain size="mini" v-model="showType">
                    <el-radio-button label="card"><i class="el-icon-menu"></i></el-radio-button>
                    <el-radio-button label="list"><i class="el-icon-s-fold"></i></el-radio-button>
                </el-radio-group>
            </div>
            <el-table class="base-table" :border="false" v-if="showType == 'list'" v-loading="loading" :data="CaseDate">
                <el-table-column align="center" label="案例名称" prop="caseName" />
                <el-table-column align="center" label="路径" prop="caseRul">
                    <template slot-scope="scope">
                        <a :href="scope.row.caseRul" target="_blank" style="color: #1890ff">{{ scope.row.caseRul }}</a>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="缩略图" prop="caseImg">
                    <template slot-scope="scope">
                        <img :src="processUrl + scope.row.caseImg" height="25" width="25" />
                    </template>
                </el-table-column>
                <el-table-column align="center" label="登录用户名" prop="caseUsername" />
                <el-table-column align="center" label="登录密码" prop="caseImg">
                    <template slot-scope="scope">
                        <el-input placeholder="请输入密码" v-model="scope.row.casePwassword" show-password></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button v-hasPermi="['iot:case:update']" icon="el-icon-edit" type="primary" plain style="padding: 5px; margin: 0" size="small" @click="handleUpdate(scope.row)">修改</el-button>
                        <el-button v-hasPermi="['iot:case:delete']" icon="el-icon-delete" type="danger" plain style="padding: 5px; margin: 0" size="small" @click="deldelCase(scope.row.caseId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-else v-loading="loading">
                <el-card v-for="(item, index) in CaseDate" class="case-card" :key="index" :body-style="{ padding: '0px', height: '100%' }">
                    <div class="case-img" @click="getlike(item)">
                        <img class="img-inner" :src="processUrl + item.caseImg" alt="" />
                    </div>
                    <div class="flex-center case-bottom" @click="getlike(item)">
                        <div class="card-name">{{ item.caseName }}</div>
                    </div>
                </el-card>
            </div>
            <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :pageSizes="[12, 24, 36, 60]" :page.sync="queryParams.pageNum" :total="total" @pagination="listCase" />
        </el-card>
        <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" append-to-body width="500px">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="案例名称" prop="caseName">
                    <el-input v-model="form.caseName" placeholder="请输入案例名称" />
                </el-form-item>
                <el-form-item label="案例图片" prop="pageImage">
                    <image-upload v-model="form.caseImg" :fileSize="1" :limit="1" />
                </el-form-item>
                <el-form-item label="案例地址" prop="caseUrl">
                    <el-input v-model="form.caseRul" placeholder="请输入案例地址" />
                </el-form-item>
                <el-form-item label="账号" prop="caseUsername">
                    <el-input v-model="form.caseUsername" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="密码" prop="casePwassword">
                    <el-input v-model="form.casePwassword" placeholder="请输入密码" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { listCaseApi, addCaseApi, updateCaseApi, deleteCaseApi } from '@/api/case/case.js';
export default {
    name: 'Case',
    data() {
        return {
            title: '新增案例',
            open: false,
            queryParams: {
                pageNum: 1,
                pageSize: 12,
                caseName: null,
                caseStatus: null,
            },
            form: {
                caseImg: '',
                caseName: '',
                casePwassword: '',
                caseRul: '',
                caseUsername: '',
            },
            showSearch: true,
            // 是否显示弹出层
            showType: 'card',
            CaseDate: [],
            // 总条数
            total: 0,
            processUrl: process.env.VUE_APP_BASE_API,
            loading: false,
        };
    },
    watch: {
        showType() {
            this.cleanData();
            this.listCase();
        },
    },
    created() {
        this.listCase();
    },
    methods: {
        deldelCase(id) {
            deleteCaseApi({ id: id }).then((res) => {
                this.$message.success('删除成功');
                this.listCase();
            });
        },
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 12,
                caseName: null,
                caseStatus: null,
            };
            this.listCase();
        },
        listCase() {
            this.loading = true;
            listCaseApi(this.queryParams).then((res) => {
                this.loading = false;
                this.CaseDate = res.rows;
                this.total = res.total;
            });
        },
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = '新增案例';
        },
        handleUpdate(row) {
            this.reset();
            this.title = '修改案例';
            this.form = row;
            this.open = true;
        },
        handleDelete(row) {},
        //跳转
        getlike(row) {
            console.log(row);
            window.open(row.caseRul, '_blank');
        },
        cleanData() {
            this.queryParams.pageSize = 12;
            this.queryParams.pageNum = 1;
            this.CaseDate = [];
        },
        // 启用\禁用
        getStatus(row) {},
        submitForm() {
            if (this.form.caseId) {
                updateCaseApi(this.form)
                    .then((res) => {
                        if (res.code == 200) {
                            this.$modal.msgSuccess(res.msg);
                            this.open = false;
                            this.cleanData();
                            this.listCase();
                        } else {
                            this.$modal.msgError(res.msg);
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            } else {
                addCaseApi(this.form)
                    .then((res) => {
                        if (res.code == 200) {
                            this.$modal.msgSuccess(res.msg);
                            this.open = false;
                            this.cleanData();
                            this.listCase();
                        } else {
                            this.$modal.msgError(res.msg);
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        reset() {
            this.form = {
                caseImg: '',
                caseName: '',
                casePwassword: '',
                caseRul: '',
                caseUsername: '',
            };
        },
        cancel() {
            this.open = false;
        },
    },
};
</script>
<style lang="scss" scoped>
#app .case-card {
    box-sizing: border-box;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: calc((100% - 60px) / 4);
    max-width: 20.57vw;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;

    &:nth-child(4n) {
        margin-right: 0;
    }

    &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
}

.case-img {
    .img-inner {
        width: 100%;
        aspect-ratio: 395 / 300;
    }
}

.case-bottom {
    position: absolute;
    width: 100%;
    height: 50px;
    left: 0;
    bottom: 0;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
}
</style>
